<template>
    <h2>显示</h2>
    <input type="button" value="批量上下架" @click="Pi"/>
    <table border="1">
       <thead>
         <tr>
            <td>
                <input type="checkbox" v-model="checkall" @change="QuanXuan"/>
            </td>
            <td>编号</td>
            <td>房型名称</td>
            <td>房号</td>
            <td>备注</td>
            <td>上下架</td>
            <td>操作</td>
        </tr>
       </thead>
       <tbody>
         <tr v-for="item in info">
            <td>
                <input type="checkbox" v-model="newArry" :checked="check" :value="item.nId" @change="FanXuan"/>
            </td>
            <td>{{item.nId}}</td>
            <td>{{item.tName}}</td>
            <td>{{item.number}}</td>
            <td>{{item.beizhu}}</td>
            <td>{{item.state?"上架":"下架"}}</td>
            <td>
                <input type="button" value="修改" @click="Xiu(item.nId)"/>
            </td>
        </tr>
       </tbody>
    </table>
</template>
<script setup lang="ts"> 
    import {ref,onMounted} from 'vue';
    import axios from 'axios';
    import {useRouter,useRoute} from 'vue-router';
    const route=useRoute();
    const router=useRouter();

    const info=ref([{
    nId: 1,
    number: "",
    beizhu: "",
    state: true,
    tName: ""
    }])

    onMounted(()=>{
        Show();
    })

    const Show=()=>{
        axios.get("https://localhost:7029/api/RoomNumber/GetRoomNumber/GetRoomNumber")
        .then(res=>{
            info.value=res.data;
        })
        .catch(err=>{
            console.log(err);
        })
    }
    const checkall=ref(false);
    const check=ref(false);
    const newArry=ref([]);

    const QuanXuan=()=>{
        if(checkall.value){
            check.value=true;
            newArry.value=info.value.map((item:any)=>{
                return item.nId;
            })
        }
        else{
            check.value=false;
            newArry.value=[];
        }
    }

    const FanXuan=()=>{
        if(info.value.length==newArry.value.length){
            checkall.value=true;
        }
        else{
            checkall.value=false;
        }
    }

    const Pi=()=>{
        if(confirm("确定要切换吗？")){
            axios.get("https://localhost:7029/api/RoomNumber/PiLiang/PiLiang",{
            params:{
                ids:newArry.value.toString()
            }
        })
        .then(res=>{
            if(res.data>0){
                alert('切换成功');
                Show();
            }
            else{
                alert('切换失败');
            }
        })
        }
    }

    const Xiu=(id:number)=>{
        router.push({
            name:"UpdateNumber",
            params:{
                id:id
            }
        })
    }

</script>
